<template>
  <div class="equipment-statistics-page">
    <div class="page-header">
      <h2>
        <el-icon><DataLine /></el-icon>
        设备统计分析
      </h2>
      <el-date-picker 
        v-model="dateRange" 
        type="monthrange"
        range-separator="至"
        start-placeholder="开始月份"
        end-placeholder="结束月份"
      />
    </div>

    <!-- 总体统计 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="设备总数" :value="statistics.total" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="运行设备" :value="statistics.running" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="故障设备" :value="statistics.fault" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="平均OEE" :value="statistics.avgOEE" suffix="%" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 设备分类统计 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <span>设备分类统计</span>
          </template>
          <el-table :data="categoryStats" stripe>
            <el-table-column prop="category" label="设备分类" />
            <el-table-column prop="count" label="数量" align="right" />
            <el-table-column prop="percentage" label="占比" width="200">
              <template #default="{ row }">
                <el-progress :percentage="row.percentage" />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 维修统计 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <span>本月维修统计</span>
          </template>
          <el-table :data="repairStats" stripe>
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="count" label="次数" align="right" />
            <el-table-column prop="cost" label="费用(元)" align="right">
              <template #default="{ row }">
                ¥{{ row.cost.toLocaleString() }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 利用率统计 -->
    <el-card class="chart-card">
      <template #header>
        <span>设备利用率排行</span>
      </template>
      <el-table :data="utilizationStats" stripe>
        <el-table-column type="index" label="排名" width="60" />
        <el-table-column prop="equipmentName" label="设备名称" min-width="150" />
        <el-table-column prop="runningHours" label="运行时长(小时)" width="150" align="right" />
        <el-table-column prop="utilization" label="利用率" width="200">
          <template #default="{ row }">
            <el-progress :percentage="row.utilization" :color="getUtilizationColor(row.utilization)" />
          </template>
        </el-table-column>
        <el-table-column prop="oee" label="OEE" width="100" align="right">
          <template #default="{ row }">
            {{ row.oee }}%
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { DataLine } from '@element-plus/icons-vue'

const dateRange = ref([])

const statistics = reactive({
  total: 45,
  running: 38,
  fault: 2,
  avgOEE: 85.2
})

const categoryStats = ref([
  { category: '数控设备', count: 15, percentage: 33.3 },
  { category: '冲压设备', count: 12, percentage: 26.7 },
  { category: '焊接设备', count: 10, percentage: 22.2 },
  { category: '其他设备', count: 8, percentage: 17.8 }
])

const repairStats = ref([
  { type: '预防性维护', count: 28, cost: 15600 },
  { type: '故障维修', count: 12, cost: 8900 },
  { type: '定期保养', count: 45, cost: 22500 }
])

const utilizationStats = ref([
  { equipmentName: '数控车床-01', runningHours: 680, utilization: 94.4, oee: 92.5 },
  { equipmentName: '加工中心-02', runningHours: 650, utilization: 90.3, oee: 88.3 },
  { equipmentName: '冲压机-03', runningHours: 620, utilization: 86.1, oee: 85.7 },
  { equipmentName: '焊接机-04', runningHours: 590, utilization: 81.9, oee: 82.1 },
  { equipmentName: '数控车床-02', runningHours: 560, utilization: 77.8, oee: 78.5 }
])

const getUtilizationColor = (utilization) => {
  if (utilization >= 85) return '#67c23a'
  if (utilization >= 70) return '#e6a23c'
  return '#f56c6c'
}
</script>

<style scoped>
.equipment-statistics-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
}

.page-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}

.chart-card {
  margin-bottom: 20px;
}
</style>
